@import "./music-font/iconfont.css";
.music-player {
    width: 5rem;
    height: 5rem;
    position: relative
}

.music-box {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.aurora-music-par {
    width: 21rem;
    position: relative
}

.aurora-music-shrink {
    width: 1rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0
}

.aurora-music-pic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2;
    border-radius: 200px;
    background: var(--aurora-music-background, #f5f5f5)
}

.aurora-music-pic-par {
    position: absolute;
    left: -5%;
    z-index: 5
}

.aurora-music-pause {
    width: 4.5rem;
    height: 4.5rem;
    padding: .3rem;
    border-radius: 200px;
    z-index: 6;
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.aurora-music-pic img {
    z-index: 3
}

.aurora-music-control-pause:before {
    font-size: 25px;
    color: #fff
}

.aurora-music-pic img {
    width: 4.5rem;
    height: 4.5rem;
    padding: .25rem;
    border-radius: 200px;
    box-shadow: 0 7px 29px 0 rgba(100, 100, 111, .2)
}

.aurora-music-info-left {
    flex: 3
}

.aurora-music-info-right {
    height: 5rem;
    flex: 8
}

.aurora-music-info {
    box-shadow: 0 7px 29px 0 rgba(100, 100, 111, .2);
    width: 20rem;
    display: flex;
    background: var(--aurora-music-background, #fff)
}

.aurora-music-title {
    max-width: 13rem;
    height: 50%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow-x: scroll
}

.aurora-music-title::-webkit-scrollbar {
    display: none
}

.aurora-music-bottom {
    display: flex;
    height: 50%;
    justify-content: center;
    align-items: center
}

.aurora-music-song-info {
    display: block
}

.aurora-music-operate {
    flex: 1;
    margin-left: .2rem;
    margin-right: .2rem;
    text-align: center
}

.aurora-music-operate span:before,
.aurora-music-shrink span:before,
.aurora-music-song:before {
    font-size: 19px;
    color: #db7093
}

.aurora-music-cursor {
    cursor: pointer
}

.aurora-music-author {
    padding-left: .5rem
}

.aurora-music-song:before {
    margin-right: .5rem
}

.music-more {
    transition: all .5s;
    transform: translateX(-100%);
    width: 20rem;
    max-height: 10rem;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    overflow-y: scroll;
    box-shadow: 0 8px 24px rgba(149, 157, 165, .2);
    border-radius: 15px;
    display: block;
    background: var(--aurora-music-background, #fff);
    position: relative;
    margin-bottom: .5rem
}

.aurora-music-info {
    transition: all 1s;
    transform: translateX(-170%)
}

.show-aurora-music-info,
.show-more-song {
    transition: all .5s;
    transform: translateX(0)
}

.music-more::-webkit-scrollbar {
    display: none
}

.aurora-music-more-single {
    margin-bottom: .2rem;
    padding-left: .6rem;
    padding-top: .1rem;
    padding-bottom: .1rem;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 20rem
}

@-webkit-keyframes music-more {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(50px, 100px)
    }
}

#cover {
    border-radius: 200px
}

.aurora-music-song-active,
.aurora-music-song-active:before {
    color: red
}

.aurora-music-player-control {
    display: none
}

@-webkit-keyframes music-picture-rotation {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn)
    }
}

.music-rotate img {
    transform: rotate(1turn);
    animation: music-picture-rotation 8s linear infinite;
    -moz-animation: music-picture-rotation 8s linear infinite;
    -webkit-animation: music-picture-rotation 8s linear infinite;
    -o-animation: music-picture-rotation 8s linear infinite
}

.aurora-music-box {
    position: fixed;
    left: .3%;
    bottom: 3%;
    z-index: 10
}

.no-show-more-song {
    width: 0;
    height: 0
}

@media screen and (min-width:719px) {
    .aurora-music-info {
        border-radius: var(--aurora-music-border-radius, 35px)
    }
}

@media screen and (max-width:719px) {
    .no-aurora-music-box {
        -webkit-animation: music-box-position-enter .33s;
        animation: music-box-position-enter .33s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }

    .show-aurora-music-box {
        -webkit-animation: music-box-position-leave .33s;
        animation: music-box-position-leave .33s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }

    @-webkit-keyframes music-box-position-leave {
        0% {
            left: -32px
        }

        to {
            left: 0
        }
    }

    @-webkit-keyframes music-box-position-enter {
        0% {
            left: 0
        }

        to {
            left: -32px
        }
    }

    .aurora-music-info {
        border-radius: 200px
    }

    .aurora-music-pause,
    .aurora-music-pic img {
        width: 3.7rem;
        height: 3.7rem;
        padding: .3rem
    }

    .aurora-music-info-right {
        height: 4.3rem
    }

    .music-player {
        width: 4.3rem;
        height: 4.3rem
    }
}